<template>
    <el-card class="box-card">

        <header>
            <el-input v-model="input" placeholder="请输入手机号/昵称" clearable style="width: 10rem;" />
            <el-button type="primary" :icon="Search" @click="searchvalue">查询</el-button>
            <el-button :icon="RefreshLeft" @click="cz">重置</el-button>
        </header>
        <el-table :data="newdata" stripe style="width: 100%">
            <el-table-column prop="userName" label="用户昵称" width="180" />
            <el-table-column prop="phone" label="手机号" width="180" />
            <el-table-column prop="ticklContent" label="内容" width="300">
                <template #default="scope">
                    <el-tooltip placement="bottom" effect="light">
                        <p class="text">{{ scope.row.ticklContent }}</p>
                        <template #content>
                            <div style="width: 20rem;">
                                {{ scope.row.ticklContent }}
                            </div>
                        </template>
                    </el-tooltip>
                </template>
            </el-table-column>

            <el-table-column label="图片" min-width="110">


                <template #default="scope">
                    <div class="demo-image__preview" v-if="scope.row.img">
                        <div v-for="(item, index ) of scope.row.img" :key="index" class="images">
                            <el-image :z-index="990000" style="width: 5rem; height: 3rem;border-radius:0.5rem ;"
                                class="image" :src="item.ticklImg" :zoom-rate="1.2" :preview-src-list="showImg(scope.row.img)"
                                :initial-index="index" fit="cover" alt="" />

                        </div>
                    </div>

                </template>
            </el-table-column>
            <el-table-column prop="ticklTime" label="注册时间" width="180">
                    <template #default="scoped">
                        {{ filter(scoped.row.ticklTime) }}
                    </template>
                </el-table-column>
        </el-table>

    
        <el-pagination background layout="prev, pager, next,jumper" :total="total" v-model:current-page="currentPage2"
      v-model:page-size="pageSize2"
      @current-change="handleCurrentChange"/>
    </el-card>
</template>

<script setup lang="ts">
import { Search, RefreshLeft } from '@element-plus/icons-vue'
import { ref } from 'vue'
import moment from "moment"
import service from '@/utils/request.ts'
const currentPage2 = ref(1)
const pageSize2 = ref(1)
const input = ref('')
const total =ref(0)
onMounted(() => {
    getDateList()
})
const handleCurrentChange = (val:Number)=>{
    currentPage2.value = val
    getDateList()
}
const filter = (time:Date)=>{
    return moment(time).format('YYYY-MM-DD HH:mm:ss')
}
const getDateList = async ()=>{
    const data =  await service.get(`/api/feedback/ticksize/?keyword=${input.value}&page=${currentPage2.value}&pagesize=${pageSize2.value}`)
    if(data.code==200){
        newdata.value = data.data
        total.value = data.total
    }
}
const showImg = (list:[])=>{
    return list.map(item=>item.ticklImg)
}

    
// 展示效果的数据
const newdata = ref([
])
// searchvalue
const searchvalue = () => {
  getDateList()
}

// 重置按钮
const cz = () => {
    input.value = ""
    getDateList()
}
</script>

<style>
.el-table .el-table__cell {
    z-index: auto !important;
}
</style>
<style scoped lang="scss">
.el-pagination{
    margin: 2rem ;
    float: right;
}
header {
    float: right;
    margin-bottom: 1rem;

    .el-input {
        margin-right: 2rem;
    }
}

.demo-image__preview {
    width: 500px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;

    .image {
        margin: 0 0.5rem;
    }
}

.text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}



.box-card {
    margin: 20px;
    border-radius: 20px;

}

.demo-image__error .image-slot {
    font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 30px;
}

.demo-image__error .el-image {
    width: 100%;
    height: 200px;
}

.el-table::before {
    height: 0;
}
</style>